import React, { Component } from 'react'
import { connect } from 'react-redux'
import axios from 'axios'

class Count extends Component {
    render() {
        const { count, add, data } = this.props
        console.log(this.props)
        return (
            <div>
                CountCount  ---  { count }
                <button onClick = { () => {
                    add(50)
                }}>++</button>
                <div>
                    <ul>
                        {
                            data.map((item, index) => {
                                return <li key = { index }>
                                    { item.image_src }
                                </li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
    componentDidMount() {
        this.props.getList()
    }
}

// 映射redux中的State去props

let mapStateToPorps = (state) => {
    const { count, data } = state
    return {
        count,
        data
    }
}

// 映射修改redux中数据的方法去props
let mapDispatchToProps = (dispatch) => {
    return {
       add(count) {
         dispatch({ type: "ADD_COUNT", count })
       },
       getList() {
         //    dispatch  ==>  超级dispatch
         //  next  ==> 原来的dispatch
         dispatch((next) => {
             axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata').then(res => {
                //    dispatch   超级dispatch
                next({ type: "SET_DATA", list: res.data.message })
             })
         })
       }
    }
}

// 柯里化
export default connect(mapStateToPorps, mapDispatchToProps)(Count)
